<template>
	<view class="content">
		<image v-if="userInfo.avatar" class="avatar" :src="$u.fileBaseUrl+userInfo.avatar" mode="aspectFill"></image>
		<view v-else class="default-avatar">
			<image class="default-avatar-content" src="/static/images/me/me_default_avatar.png" mode=""></image>
		</view>
		<view class="nickname" @click="token ? $u.route('/packagesMe/me/userInfo') : $u.route('/packages/login/login')">
			<view class="userInfo-nickname">
				{{userInfo.nickname ? userInfo.nickname : "登录/注册"}}
			</view>
			<view class="icon">
				<u-icon v-if="userInfo.gender=='female_photography'" name="woman" size="40" color="#ff557f"></u-icon>
				<u-icon v-if="userInfo.gender=='male_photography'" name="man" size="40" color="#55aaff"></u-icon>
			</view>
		</view>
		<view class="sign">{{userInfo.personalSign ? userInfo.personalSign : "添加个性签名，让大家更懂你！"}}</view>

		<view class="card">
			<view @click="$u.route('/packagesMe/me/myOrder')">
				<text>{{userInfo.orderCount}}</text>
				<text>订单</text>
			</view>
			<view @click="$u.route('/packagesMe/me/concern')">
				<text>{{userInfo.focusCount}}</text>
				<text>关注</text>
			</view>
			<view @click="$u.route('/packagesMe/me/Strategy')">
				<text>{{userInfo.momentCount}}</text>
				<text>攻略</text>
			</view>
		</view>

		<!-- 菜单 -->
		<view class="menu-box">
			<view class="services">
				更多服务
			</view>
			<!-- <view class="item" @click="$u.route('/packagesMe/me/MyRoute')">
				<view class="left">
					<uni-icons type="location" size="30"></uni-icons>
					<text>我的路线</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="25" color="#999999"></u-icon>
				</view>
			</view> -->
			<!-- <view class="item" @click="$u.route('/packagesMe/me/wallet')">
				<view class="left">
					<uni-icons type="wallet" size="30"></uni-icons>
					<text>我的钱包</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="25" color="#999999"></u-icon>
				</view>
			</view> -->
			<view class="item" @click="getPhone()">
				<view class="left">
					<image class="left-icon" src="/static/images/me/me_01.png" mode="aspectFill"></image>
					<text>联系客服</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="35" color="#ddd"></u-icon>
				</view>
			</view>
			<view class="item" @click="$u.route('/packagesMe/me/register')">
				<view class="left">
					<image class="left-icon" src="/static/images/me/me_02.png" mode="aspectFill"></image>
					<text>加入我们</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="35" color="#ddd"></u-icon>
				</view>
			</view>
			<view class="item" @click="$u.route('/packagesMe/me/Feedback')">
				<view class="left">
					<image class="left-icon" src="/static/images/me/me_03.png" mode="aspectFill"></image>
					<text>意见反馈</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="35" color="#ddd"></u-icon>
				</view>
			</view>
			<view class="item" @click="$u.route('/packagesMe/me/userPolicy')">
				<view class="left">
					<image class="left-icon" src="/static/images/me/me_04.png" mode="aspectFill"></image>
					<text>用户协议</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="35" color="#ddd"></u-icon>
				</view>
			</view>
			<view class="item" @click="$u.route('/packagesMe/me/privacyPolicy')">
				<view class="left">
					<image class="left-icon" src="/static/images/me/me_04.png" mode="aspectFill"></image>
					<text>隐私政策</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="35" color="#ddd"></u-icon>
				</view>
			</view>
			<view class="item" @click="getLoginOut()">
				<view class="left">
					<image class="left-icon" src="/static/images/me/me_06.png" mode="aspectFill"></image>
					<text>退出登录</text>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="35" color="#ddd"></u-icon>
				</view>
			</view>
		</view>

		<!-- 确认登录模态框 -->
		<u-modal :show="showModal" :title="title" title='您还未登录,请登录!' :showCancelButton="true" @confirm="confirm"
			@cancel="cancel"></u-modal>
		<cc-myTabbar :tabBarShow="4"></cc-myTabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					nickname: "",
					mobile: "",
					sign: ""
				}, // 用户信息
				showModal: false, //确认登录
			}
		},
		onLoad() {
			let token = uni.getStorageSync('token');
			if (!token) {
				// this.showModal = true
			}
		},
		onShow() {
			this.getUserInfo();
		},
		//触底事件
		onReachBottom() {},
		methods: {
			//获取用户信息
			async getUserInfo() {
				let res = await this.$u.api.getqueryUser();
				if (res.code == 200) {
					this.userInfo = res.data;
					uni.setStorageSync("userInfo", res.data);
				}
			},
			// 退出登录
			async getLoginOut() {
				uni.showModal({
					content:"确定退出登录吗？",
					success:res => {
						if(res.confirm){
							uni.removeStorageSync('token');
							uni.removeStorageSync('userInfo');
							this.$u.toast('退出登录成功！')
							this.$socket.closeSocket();
							setTimeout(() => {
								uni.reLaunch({
									url: '/packages/login/login'
								})
							}, 1000)
						}
					}
				})
				
			},
			// 确认登录
			confirm() {
				// 跳转到登录页面
				this.showModal = false
				uni.navigateTo({
					url: '/packages/login/login'
				})
			},
			// 取消
			cancel() {
				this.showModal = false
			},
			// 联系客服
			getPhone() {
				let that = this
				uni.makePhoneCall({
					phoneNumber: '13462532716', //仅为示例，并非真实的电话号码
					fail() {
						that.$u.toast('取消拨打电话')
					}
				})
			},
		},
		onReady() {
			// uni.hideTabBar()
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 50rpx;

		.avatar,
		.default-avatar {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;
			margin-top: 40rpx;
		}

		.default-avatar {
			background-color: $overall-color;
			position: relative;
		}

		.default-avatar-content {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 90rpx;
			height: 90rpx;
		}


		.nickname {
			display: flex;
			gap: 10rpx;
			align-items: center;
			margin: 20rpx auto;

			.userInfo-nickname {
				font-size: 32rpx;
				color: #333;
			}

		}

		.sign {
			color: #ddd;
			font-size: 24rpx;
		}



		.card {
			width: 100%;
			margin: 30rpx 0;
			display: flex;
			border: 4rpx solid #f1f1f1;
			border-radius: 16rpx;
			justify-content: space-evenly;
			padding: 30rpx 0;

			view {
				text {
					text-align: center;
					display: block;

					&:nth-child(1) {
						font-size: 40rpx;
					}

					&:nth-child(2) {
						color: #333333;
						font-size: 32rpx;
					}
				}
			}
		}

		.menu-box {
			width: 100%;
			margin: 80rpx 50rpx 150rpx;

			.services {
				position: relative;
				color: #333;
				box-sizing: border-box;
				padding-left: 45rpx;

				&::before{
					content:'';
					position:absolute;
					top:50%;
					transform: translateY(-50%);
					left:0;
					width:30rpx;
					height:30rpx;
					border-radius: 50%;
					background: $overall-color;
				}

				
			}
			
			.item {
				box-sizing: border-box;
				width:100%;
				padding: 50rpx 30rpx 0 40rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			
				.left {
					display: flex;
					align-items: center;
					gap:10rpx;
					
					.left-icon{
						width:28rpx;
						height:28rpx
					}
		
			
					text {
						font-size: 30rpx;
						color: #999;
					}
				}
			}


		}
	}
</style>